/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import RightContent from '@/components/GlobalHeader/RightContent';
import { connect } from 'dva';
import React, { useState,PureComponent } from 'react';
import logo from '../assets/logo.svg';
import Authorized from '@/utils/Authorized';
import { formatMessage } from 'umi-plugin-react/locale';
import { isAntDesignPro } from '@/utils/utils';
import { BasicLayout as ProLayoutComponents,SettingDrawer } from '@ant-design/pro-layout';
import Link from 'umi/link';
import { message } from 'antd';
import { render } from 'react-dom';

/**
 * use Authorized check all menu item
 */
// const menuDataRender = menuList => {
//   console.log('menuList',menuList);
//   return menuList.map(item => {
//     const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
//     return Authorized.check(item.authority, localItem, null);
//   });
// };

const footerRender = (_, defaultDom) => {
  if (!isAntDesignPro()) {
    return defaultDom;
  }

  return (
    <>
      {defaultDom}
      <div
        style={{
          padding: '0px 24px 24px',
          textAlign: 'center',
        }}
      >
        <a href="https://www.netlify.com" target="_blank">
          <img
            src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
            width="82px"
            alt="netlify logo"
          />
        </a>
      </div>
    </>
  );
};
//注入模型类 dispatch
const mapStateToProps = (state) => {
  const adminMenuList = state['AdminMenu'].adminMenuList;
  const settings = state['settings'].defaultSettings;
  //console.log('aa',state);
  return {
    settings,
    adminMenuList,
  };
};
@connect(mapStateToProps)
@connect(({ global, settings }) => ({
    collapsed: global.collapsed,
    settings
  }))
export default class BasicLayout extends PureComponent {
  
  /**
   * constructor
   */

  useState=() => {
    if (this.props.dispatch) {
      this.props.dispatch({
        type: 'user/fetchCurrent',
      });
      this.props.dispatch({
        type: 'settings/getSetting',
      });
    }
  };
  /**
   * init variables
   */

  handleMenuCollapse = payload =>{
    return this.props.dispatch &&
    this.props.dispatch({
      type: 'global/changeLayoutCollapsed',
      payload,
    })};
  getMenuList = ()=>{
    this.props.dispatch({
        type: 'AdminMenu/getMenuList',
        callback:(e)=>{
          return e.data.list;
          
        }
    });
    return [];
  };
  /**
   * 前置函数 在页面加载时就执行的函数
   */
  componentDidMount = () => {
      this.getMenuList();//初次加载
      this.useState();
  }
  // menuDataRender = (menuList)=>{
  //     this.menuDataRenders(menuList);
  // }
  menuDataRender = (menuList,menuLists = []) => {
    //console.log('aaaaaaaaaaaaaaa',menuLists.length);
    
    if(menuLists.length === 0){
      menuLists = this.props.adminMenuList;
      if(menuLists === undefined){
        menuLists = menuList;
      }
    }
    //console.log('bbbbbbbbbbbbbb',menuLists);
    //const menuLists = this.getMenuList();
    return menuLists.map(item => {
      
      const localItem = { ...item, children: item.children ? this.menuDataRender(menuLists,item.children) : [] };
      //console.log('return',Authorized.check(item.authority, localItem, null));
      return Authorized.check(item.authority, localItem, null);
    });
  };
  render(){
    const { dispatch, children, settings } = this.props;
    
    return (
      <ProLayoutComponents
        logo={logo}
        onCollapse={this.handleMenuCollapse}
        menuItemRender={(menuItemProps, defaultDom) => {
          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}
        breadcrumbRender={(routers = []) => {
          return [
            {
              path: '/',
              breadcrumbName: formatMessage({
                id: 'menu.home',
                defaultMessage: 'Home',
              }),
            },
            ...routers,
          ];
        }}
        footerRender={footerRender}
        menuDataRender={this.menuDataRender}
        formatMessage={formatMessage}
        rightContentRender={rightProps => <RightContent {...rightProps} />}
        {...this.props}
        {...settings}
      >
        {children}
        <SettingDrawer settings={settings} onSettingChange={(e)=>{
          // console.log('rightProps',rightProps);
          this.props.dispatch({
            type: 'settings/changeSetting',
            payload:e
          });
        }}></SettingDrawer>
      </ProLayoutComponents>
    );
  }
}
// const BasicLayout = props => {
//   const { dispatch, children, settings } = props;
//   /**
//    * constructor
//    */

//   useState(() => {
//     if (dispatch) {
//       dispatch({
//         type: 'user/fetchCurrent',
//       });
//       dispatch({
//         type: 'settings/getSetting',
//       });
//     }
//   });
//   /**
//    * init variables
//    */

//   const handleMenuCollapse = payload =>{
//     dispatch &&
//     dispatch({
//       type: 'global/changeLayoutCollapsed',
//       payload,
//     });
//   }
//   const getMenuList = ()=>{
//     if(dispatch){
//       dispatch({
//           type: 'AdminMenu/getMenuList',
//           callback:(e)=>{
//             if(e.code != 1){
//               message.error(e.msg);
//             }else{
//               return e.data.list;
//             }
            
//           }
//       });
//     }
//     return [];
//   }
//   const menuDataRender = menuList => {
    
//     const menuLists = getMenuList();
//     console.log(props);
    
//     return menuList.map(item => {
//       const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
//       return Authorized.check(item.authority, localItem, null);
//     });
//   };
//   return (
//     <ProLayoutComponents
//       logo={logo}
//       onCollapse={handleMenuCollapse}
//       menuItemRender={(menuItemProps, defaultDom) => {
//         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
//       }}
//       breadcrumbRender={(routers = []) => {
//         return [
//           {
//             path: '/',
//             breadcrumbName: formatMessage({
//               id: 'menu.home',
//               defaultMessage: 'Home',
//             }),
//           },
//           ...routers,
//         ];
//       }}
//       footerRender={footerRender}
//       menuDataRender={menuDataRender}
//       formatMessage={formatMessage}
//       rightContentRender={rightProps => <RightContent {...rightProps} />}
//       {...props}
//       {...settings}
//     >
//       {children}
//     </ProLayoutComponents>
//   );
// };
// const mapStateToProps = (state) => {
//   console.log('state',state);
//   const adminMenuList = state['AdminMenu'].adminMenuList;
//   return {
//     adminMenuList,
//   };
// }
// export default connect(({ global, settings }) => ({
//   collapsed: global.collapsed,
//   settings
// }))(BasicLayout);
